<template>
  <div>
    <el-form label-width="100px" :model="form">
      <el-form-item resetField label="车辆品牌" prop="brand">
        <el-select
          placeholder="请选择车辆品牌"
          style="width: 240px"
          v-model="form.brand"
        >
          <el-option
            v-for="item in brands"
            :key="item.bid"
            :value="item.brandname"
            :label="item.brandname"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">筛选</el-button>
        <el-button @click="clear" style="margin-left: 20px" type="primary" plain
          >清空筛选条件</el-button
        >
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-table
      header-row-class-name="header"
      style="flex: 1"
      :data="form.result"
    >
      <el-table-column label="车辆编号" width="80px" align="center" prop="lid">
      </el-table-column>
      <el-table-column align="center" prop="img" label="图片" width="240px">
        <template slot-scope="scope">
          <img
            :src="scope.row.img"
            style="width: 200px; height: 140px; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="车辆型号"
        width="120px"
        align="center"
        prop="car"
      ></el-table-column>
      <el-table-column
        label="品牌"
        width="120px"
        align="center"
        prop="brand"
      ></el-table-column>
      <el-table-column
        label="事故类型"
        width="160px"
        align="center"
        prop="accident"
      ></el-table-column>
      <el-table-column
        label="收购价格"
        width="160px"
        align="center"
        prop="price"
      ></el-table-column>
      <el-table-column
        label="暂存地"
        width="240px"
        align="center"
        prop="address"
      ></el-table-column>
      <el-table-column
        label="所属保险公司"
        width="160px"
        align="center"
        prop="insure"
      ></el-table-column>
      <el-table-column
        label="行驶里程"
        width="160px"
        align="center"
        prop="mileage"
      ></el-table-column>
      <el-table-column label="操作" width="240px" align="center">
        <template slot-scope="scope">
          <el-button
            @click="$router.push('/home/car-update?lid=' + scope.row.lid)"
            type="warning"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="del(scope.row.lid)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 30px"
      background
      layout="total,next,pager,prev,jumper"
      :page-size="form.pageCount"
      :total="form.total"
      :current-page="form.pageNum"
      @current-change="changePage($event)"
    >
    </el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      brands: [],
      form: {
        brand: "",
        pageNum: 1,
        pageCount: 3,
        total: 0,
        result: [],
      },
    };
  },
  methods: {
    brandList() {
      httpApi.estimateApi.queryCarBrand().then((res) => {
        // console.log(res);
        this.brands = res.data.data;
      });
    },
    queryCar() {
      let params = {
        pageNum: this.form.pageNum,
        pageCount: this.form.pageCount,
        brand: "",
      };
      httpApi.carmanagementApi.carList(params).then((res) => {
        // console.log(res);
        this.form.result = res.data.data;
        this.form.pageNum = res.data.pageNum;
        this.form.pageCount = res.data.pageCount;
        this.form.total = res.data.total;
      });
    },
    changePage(page) {
      this.form.pageNum = page;
      this.search();
      // console.log(page);
    },
    submit() {
      // console.log(this.form);
      this.form.pageNum = 1;
      this.search();
    },
    search() {
      if (this.form.brand == "") {
        this.queryCar();
      } else {
        // console.log(this.form.brand);
        this.queryCarByBrand();
      }
    },
    queryCarByBrand() {
      let params = {
        pageNum: this.form.pageNum,
        pageCount: this.form.pageCount,
        brand: this.form.brand,
      };
      httpApi.carmanagementApi.carList(params).then((res) => {
        this.form.result = res.data.data;
        this.form.pageNum = res.data.pageNum;
        this.form.pageCount = res.data.pageCount;
        this.form.total = res.data.total;
      });
    },
    clear() {
      this.form.brand = "";
      this.queryCar();
    },
    del(lid) {
      console.log(lid);
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpApi.carmanagementApi.carDelete({ lid }).then((res) => {
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "车辆信息删除成功" });
            } else {
              this.$message({ type: "error", message: "删除失败请稍后重试" });
            }
          });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除该项信息" });
        });
    },
  },
  mounted() {
    this.queryCar();
    this.brandList();
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  flex: 1;
}
</style>